<template>
    <div class="researchProductDetail">
        <div class="header">
            <van-nav-bar title="商品详情" left-arrow @click-left="handleLeft"></van-nav-bar>
        </div>
        <div class="contents" :style="{ 'paddingBottom': detailInfo.auditStatus !== '-2' ? '22.4vw' : '0' }">
            <div class="product_detail_top">
                <div class="product_detail_top_img">
                    <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                        <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                            <van-image class="product_detail_top-image"
                                :src="image + '?x-oss-process=image/resize,w_300'"
                                @click="enlargeImage(realSrcList, index)" />
                        </van-swipe-item>
                    </van-swipe>
                    <van-image :src="errImg" v-if="!realSrcList.length"> </van-image>
                </div>
            </div>
            <div class="product_detail_top_details">
                <div class="product_stylename">
                    <div class="styleName">{{ detailInfo.styleName }}</div>
                    <div class="product_mechanism" v-if="hmMechanismsList?.cooperationMode">多机制</div>
                </div>
                <div class="product_id">
                    <div class="produc_left">
                        {{ detailInfo.id }}
                        <van-image :src="copy" class="imgs" @click="copyClick(detailInfo.id)" v-show="detailInfo.id" />
                    </div>
                    <div class="coreName" v-if="detailInfo.coreName">
                        <van-image :src="icon_bumen" />
                        {{ detailInfo.coreName }}
                    </div>
                </div>
                <div class="product_users">
                    <div>{{ detailInfo.recruiter }}</div>
                    <div>{{ detailInfo.recruiterDept }}</div>
                </div>
                <div class="product_user">
                    <div class="examine display">
                        <div class="examine_item"
                            :style="{ backgroundColor: conputedQualityLog(detailInfo.qualityLog) ? '#E7FDEE' : '#FDE7E7', color: conputedQualityLog(detailInfo.qualityLog) ? '#19D11B' : '#FC2540' }">
                            核价初审<van-image
                                :src="conputedQualityLog(detailInfo.qualityLog) ? icon_lvseduihao : icon_wenhaohongse" />
                        </div>
                        <!-- <div class="examine_item"
                            :style="{ backgroundColor: conputedPricingLog(detailInfo.pricingLog) ? '#E7FDEE' : '#FDE7E7', color: conputedPricingLog(detailInfo.pricingLog) ? '#19D11B' : '#FC2540' }">
                            核价复审<van-image
                                :src="conputedPricingLog(detailInfo.pricingLog) ? icon_lvseduihao : icon_wenhaohongse" />
                        </div> -->
                        <div class="examine_item"
                            :style="{ backgroundColor: detailInfo.auditStatus >= 13 ? '#E7FDEE' : '#FDE7E7', color: detailInfo.auditStatus >= 13 ? '#19D11B' : '#FC2540' }">
                            核价复审<van-image :src="detailInfo.auditStatus >= 13 ? icon_lvseduihao : icon_wenhaohongse" />
                        </div>
                    </div>

                </div>
            </div>
            <!-- 轮播机制卡片 -->
            <mechanismCard :data="detailInfo.hmMechanismsList"></mechanismCard>

            <!-- 商品信息 -->
            <div class="info">
                <div v-for="(item, index) in infoList" :key="index" class="info_item" @click="popClick(index, item)">
                    <van-image :src="item.img" class="img"></van-image>
                    <div class="title">{{ item.title }}</div>
                    <van-image :src="icon_huisejiantou" class="links"></van-image>
                </div>
            </div>
            <messagePopup v-model="popShow" :type="popType" :data="popData" :title="popTitle"></messagePopup>
            <!-- 空白 -->
            <div class="back" v-if="detailInfo.auditStatus !== '-2'"></div>
            <!-- 底部更多等 -->
            <div class="footer" v-if="detailInfo.auditStatus !== '-2'">
                <div class="more" @click="moreClick"
                    v-if="detailInfo.auditStatus !== '-1' && detailInfo.auditStatus !== '-2'">
                    <img :src="rightPop ? icon_heiseshangsanjiao : icon_heisexiasanjiao" />
                    更多
                </div>
                <div :class="computAud(detailInfo.auditStatus)?.buttonright ? 'footer_left' : 'footer_lefts'"
                    v-if="computAud(detailInfo.auditStatus)?.buttonleft" v-throttle:click
                    @click="audClick(computAud(detailInfo.auditStatus)?.buttonleft, detailInfo.id)">
                    <template v-if="loading">
                        <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
                    </template>
                    <template v-else>
                        {{ computAud(detailInfo.auditStatus)?.buttonleft }}
                    </template>
                </div>
                <div :class="computAud(detailInfo.auditStatus)?.buttonleft ? 'footer_right' : 'footer_button'"
                    v-if="computAud(detailInfo.auditStatus)?.buttonright" v-throttle:click
                    @click="audClick(computAud(detailInfo.auditStatus)?.buttonright, detailInfo.id)">

                    <template v-if="loading">
                        <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
                    </template>
                    <template v-else>
                        {{ computAud(detailInfo.auditStatus)?.buttonright }}
                    </template>
                </div>
            </div>
            <!-- 更多弹窗 -->
            <div class="right_pop" v-if="rightPop">
                <!-- 更改主播 -->
                <div @click="anchorOnclick"
                    v-if="(Number(detailInfo.auditStatus) >= -5 && Number(detailInfo.auditStatus) < 18 && Number(detailInfo.auditStatus) != -1 && Number(detailInfo.auditStatus) != -2) || detailInfo.auditStatus == 22">
                    {{ detailInfo.auditStatus ? '变更主播' : '' }}</div>
                <!-- 都可编辑 -->
                <div @click="onClickRight" v-if="handleEditPermission(detailInfo.auditStatus) == 1">编辑</div>
                <!-- 只可编辑机制 规格/材质 卖点 商品图 -->
                <div @click="onClickMechanism" v-if="handleEditPermission(detailInfo.auditStatus) == 4">编辑</div>
                <!-- 编辑商品信息，除了机制 -->
                <div @click="onClickRights" v-if="handleEditPermission(detailInfo.auditStatus) == 3">编辑</div>
                <!-- 只可编辑规格/材质 卖点 商品图 -->
                <div @click="onClickRightFive" v-if="handleEditPermission(detailInfo.auditStatus) == 5">编辑</div>
                <!-- 已到样状态及以后都可打印条码 -->
                <div v-if="Number(detailInfo.auditStatus) >= 5 || Number(detailInfo.auditStatus) <= -3"
                    @click="onClickComplement">
                    打印条码</div>
            </div>
        </div>


        <!-- 资质送审 -->
        <van-overlay :show="qualificationsFlag" z-index="2001">
            <div class="wrapper_qualifications" @click.stop>
                <div class="wrapper_div">
                    <van-image class="close" :src="colseImg" @click="qualificationsclose"></van-image>
                    <div class="title">选择送审品类</div>
                    <div class="describe">请为您的商品选择送审的品类</div>
                    <div class="column">
                        <div class="lable">可选品类</div>
                        <div class="value" @click="categoryFlag = true">
                            {{ categoryMessage || '请选择' }}
                            <van-image :src="icon_heisexiasanjiao"></van-image>
                        </div>
                    </div>
                    <van-popup v-model:show="categoryFlag" position="bottom">
                        <van-picker title="可选品类" :columns="categoryColumns" @confirm="onConfirmCategory"
                            @cancel="categoryFlag = false" v-model="selectedValues" />
                    </van-popup>
                    <div class="buttons">
                        <div class="cancel" @click="qualificationsCancel">取消</div>
                        <div class="save" @click="qualificationsSubmit">
                            <template v-if="loading">
                                <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
                            </template>
                            <template v-else>
                                确定
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </van-overlay>
        <!-- 无合同审批 -->
        <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
        <van-overlay :show="noContractApprovalFlag" z-index="6001">
            <div class="wrapper" @click.stop>
                <div class="wrapper_div">
                    <van-image :src="colseImg" @click="close"></van-image>
                    <div class="title">审批附言</div>
                    <van-form @submit="noContractSubmit">
                        <div class="label">请选择补充合同日期</div>
                        <van-field v-model="suppContractDate" class="dates" readonly name="calendar" label=""
                            placeholder="日期选择" @click="showCalendar = true" />
                        <div class="label">审批附言</div>
                        <van-field maxlength="50" show-word-limit v-model="message" rows="6" label="" type="textarea"
                            placeholder="请输入审批附言" :border="false" />

                        <van-button class="buttons" :loading="loading" loading-text="执行中..." round block type="primary"
                            native-type="submit" v-throttle:click>
                            提交确认
                        </van-button>
                    </van-form>
                </div>
            </div>
        </van-overlay>
        <!-- 二次确认退还供应商 -->
        <van-dialog v-model:show="dialogShow" :showConfirmButton="false">
            <div class="dialog_top">
                <van-image :src="icon_erciqueren"></van-image>
                <div class="title">确认退还</div>
                <div class="describe">
                    确认将选中商品退还供应商？
                </div>
            </div>
            <div class="postscript">
                <div class="buttons">
                    <div class="cancel" @click="dialogShow = false">取消</div>
                    <div class="submit" @click="returnSubmit">
                        <template v-if="loading">
                            <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
                        </template>
                        <template v-else>
                            确认
                        </template>
                    </div>
                </div>
            </div>
        </van-dialog>
        <anchorSelection :loading="loading" :isShow="isShowAnchor" @goback="goback" @onSubmit="anchorOnSubmit"
            @onChangeSubmit="onChangeSubmit" :isChange="isChangeList" :id="detailInfo.id"></anchorSelection>
    </div>
</template>
<script setup lang="ts">
import anchorSelection from '@/components/anchorSelection/index.vue'
import { handleEditPermission } from "@/utils/auditStatusFilter";
import { computed, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getEnvValue } from "@/utils/index";
import { showImagePreview, showFailToast, showSuccessToast, showDialog } from "vant";
import { getbrandId, hmSupplierList } from "@/api/supplierList/index";
import { copyTextToClipboard } from '@/utils/index'
import { againStock } from '@/api/productHome/index.ts'
import Qs from "qs";
import { editTwo, editFour, publishInvent, outSupplier, reAuditSecond, requestGroup, reAuditSecondInvent, requestThirdInvent, coreInvent, editOff, editSevens, listBrand, getInfoInvent, editTen, noContractAdd, changeCore } from "@/api/productList/index";
import messagePopup from './components/messagePopup.vue'
import mechanismCard from '@/views/operation/product/components/mechanismCard.vue'
import { getSystemList } from '@/api/approval/index'
import { getInfo } from "@/api/supplierList/index";
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const copy = new URL("@/assets/productHome/icon_fuzhi.png", import.meta.url).href;
const icon_lvseduihao = new URL("@/assets/operation/icon_lvseduihao.png", import.meta.url).href;
const icon_bumen = new URL("@/assets/operation/icon_bumen.png", import.meta.url).href;
const icon_shangpinzizhi = new URL("@/assets/operation/icon_shangpinzizhi.png", import.meta.url).href;
const icon_zhibobuchongxinxi = new URL("@/assets/operation/icon_zhibobuchongxinxi.png", import.meta.url).href;
const icon_jichuxinxi = new URL("@/assets/operation/icon_jichuxinxi.png", import.meta.url).href;
const icon_huisejiantou = new URL("@/assets/operation/icon_huisejiantou.png", import.meta.url).href;
const icon_wenhaohongse = new URL("@/assets/productHome/icon_wenhaohongse1.png", import.meta.url).href;
const icon_heisexiasanjiao = new URL("@/assets/productHome/icon_heisexiasanjiao.png", import.meta.url).href;
const icon_heiseshangsanjiao = new URL("@/assets/productHome/icon_heiseshangsanjiao.png", import.meta.url).href;
const colseImg = new URL("@/assets/approval/close.png", import.meta.url).href;
const icon_erciqueren = new URL("@/assets/operation/icon_erciqueren.png", import.meta.url).href;
const route = useRoute();
const router = useRouter();
/** 商品id */
const uniquekey = computed(() => {
    return route.params.id;
});
/** 上级路由 */
const type = computed(() => {
    return route.query.type;
});
// 信息
const infoList = ref([
    { img: icon_jichuxinxi, title: '基础信息：供应商名｜类目｜品牌｜对接群｜规格/材质｜历史最低售价', content: '基础信息' },
    { img: icon_zhibobuchongxinxi, title: '大货及直播补息：发货时间｜发货地｜物流/快递｜使用人群｜厂家可用库存 ', content: '直播补充信息' },
    { img: icon_zhibobuchongxinxi, title: '供应商信息：商家类型｜商品类目｜厂家地址｜联系人｜联系电话 ', content: '供应商信息' },
    { img: icon_shangpinzizhi, title: '商品资质：商品实拍｜备案政策/许可证证件｜其他资质', content: '商品资质' },

])
// 更改主播信息
const isChangeList = ref()
// 主播选品
const isShowAnchor = ref(false)
// 信息弹窗
const popShow = ref(false)
// 信息弹窗类别
const popType = ref<number>()

const loading = ref(false)
// 信息弹窗数据
const popData = ref()
// 信息弹窗标题
const popTitle = ref()
// 机制1
const hmMechanismsList = ref<any>()
const detailInfo = ref<any>({});
// 更多弹窗
const rightPop = ref(false)
// 资质审核显隐
const qualificationsFlag = ref(false)
// 资质审核可选品类值
const categoryMessage = ref()
// 资质审核可选品类id
const categoryId = ref()
// 资质审核可选品类显隐
const categoryFlag = ref(false)
// 资质审核可选品类column
const categoryColumns = ref([])
// 无合同补充合同日期
const suppContractDate = ref('');
// 无合同日期筛选显隐
const showCalendar = ref(false);
// 无合同审批附言
const message = ref('')
// 无合同审批显隐
const noContractApprovalFlag = ref(false)

// 部门名称
const deptName = ref()

// 送审品类值
const selectedValues = ref<any[]>([])


const realSrcList = ref<string[]>([]);
const voucherImageList = ref<string[]>([]);
const customsDeclarationImageList = ref<string[]>([]);
const customsInformationImageList = ref<string[]>([]);
const customsInspectionImageList = ref<string[]>([]);
const customsTestReportImgaeList = ref<string[]>([]);
const otherImageList = ref<string[]>([]);
const noAbImageList = ref<string[]>([]);

// 退还弹窗
const dialogShow = ref(false)

/** 不同状态对应的按钮以及样式 */
const buttonList = reactive([
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "已邮寄",
        buttonrightColor: "",
        buttonrightAvatorBackgroundColor: '',
        status: '0',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "待收货",
        buttonrightColor: "",
        buttonrightAvatorBackgroundColor: '',
        status: '1',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "确认收货",
        buttonrightColor: "",
        buttonrightAvatorBackgroundColor: '',
        status: '2',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "修改机制",
        buttonrightColor: "",
        buttonrightAvatorBackgroundColor: '',
        status: '3',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "上架",
        buttonrightColor: "",
        buttonrightAvatorBackgroundColor: '',
        status: '4',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "主播选品",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '5',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "发起初审",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '6',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '',
        buttonleftBackgroundColor: '',

        buttonright: "",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '7',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "发起初审",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '8',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "发起初审",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '9',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "发起初审",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '10',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '11',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "价格复审",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '12',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "无合同审批",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '13',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "入库",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '14',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "入库",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '15',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '16',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "重新入库",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '17',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "变价审核",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '18',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '19',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "变价审核",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '20',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "变价审核",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '21',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#0094FF',

        buttonright: "",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '22',
    },
    {
        buttonleft: "退还",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "上架",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-1',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-2',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "总监复核",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-3',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-4',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "总监复核",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-5',
    },
    {
        buttonleft: "下架",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "主播选品",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-6',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "上架",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-7',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "总监审批",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-8',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-9',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "组长审批",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-10',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-11',
    },
    {
        buttonleft: "",
        buttonleftColor: '#fff',
        buttonleftBackgroundColor: '#19D11B',

        buttonright: "组长审批",
        buttonrightColor: "#fff",
        buttonrightAvatorBackgroundColor: '#FC2540',
        status: '-12',
    },
]);


/** 设置不同状态回显文字 */
const computAud: any = (auditStatus: string) => {
    const match = buttonList.find(
        (element) => element.status == auditStatus
    );
    return match; // 如果找到匹配项，返回其 button
};
/** 点击事件 */
const audClick = async (title: string, id: string) => {
    if (title == '已邮寄') {
        router.push(`/orderNumber/${id}`);
    } else if (title == '已到样') {
        loading.value = true
        try {
            await editTwo({ id: id });
            loading.value = false
            showSuccessToast({ type: "success", message: "商品到样确认成功" });
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('商品到样确认失败');
            }
            loading.value = false
        }
    } else if (title == '确认收货') {
        loading.value = true
        try {
            await editFour(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
            showSuccessToast({ type: "success", message: "商品确认收货成功" });
            loading.value = false
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('商品确认收货失败');
            }
            loading.value = false
        }
    } else if (title == "修改机制") {
        router.push({
            path: `/researchEditProduct/${uniquekey.value}`,
            query: { type: "type" },
        });
    } else if (title == '发起初审') {
        qualificationsFlag.value = true
        categoryColumns.value.forEach((item: any) => {
            if (item.value == detailInfo.value.productType) {
                categoryMessage.value = item.text
                categoryId.value = item.value
                selectedValues.value = [item.value]
                return;
            }
        });
    } else if (title == '上架') {
        loading.value = true
        try {
            await publishInvent(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
            showSuccessToast({ type: "success", message: "商品上架成功" });
            loading.value = false
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('商品上架失败');
            }
            loading.value = false
        }
    } else if (title == '主播选品') {
        isShowAnchor.value = true
    } else if (title == '下架') {
        loading.value = true
        try {
            await editOff(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));

            loading.value = false
            showSuccessToast({ type: "success", message: "商品下架成功" });
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('商品下架失败');
            }
            loading.value = false
        }
    } else if (title == '退还') {
        dialogShow.value = true
    } else if (title == '价格复审') {
        // 商品二审
        loading.value = true
        try {
            await reAuditSecond({ id: id })
            loading.value = false
            showSuccessToast({ type: "success", message: "商品送审成功" });
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('商品送审失败');
            }
            loading.value = false
        }
    } else if (title == '无合同审批') {
        // 无合同审批
        noContractApprovalFlag.value = true
    } else if (title == '入库') {
        // 无合同驳回时
        if (detailInfo.value.auditStatus == 14) {
            if (detailInfo.value.sellStatus == "已签署") {
                // 入库
                loading.value = true
                try {
                    await editTen(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
                    loading.value = false
                    showSuccessToast({ type: "success", message: "产品入库中" });
                    clearImgs();
                    getDetail();
                } catch (error) {
                    if (error == 'timeout') {
                        showFailToast('产品入库失败');
                    }
                    loading.value = false
                }
            } else if (detailInfo.value.bigBrandStatus == "1" && detailInfo.value.sellStatus == "未签署") {
                // 入库
                loading.value = true
                try {
                    await editTen(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
                    loading.value = false
                    showSuccessToast({ type: "success", message: "产品入库中" });
                    clearImgs();
                    getDetail();
                } catch (error) {
                    if (error == 'timeout') {
                        showFailToast('产品入库失败');
                    }
                    loading.value = false
                }
            } else {
                showDialog({
                    title: "无法入库",
                    message: "当前商品暂无供销合同，请关注供销合同上传或无合同审批进展...",
                });
            }
        } else {
            // 入库
            loading.value = true
            try {
                await editTen(Qs.stringify({ ids: [id] }, { arrayFormat: 'repeat' }));
                loading.value = false
                showSuccessToast({ type: "success", message: "产品入库中" });
                clearImgs();
                getDetail();
            } catch (error) {
                if (error == 'timeout') {
                    showFailToast('产品入库失败');
                }
                loading.value = false
            }
        }
    } else if (title === '重新入库') {
        // 重新入库
        loading.value = true
        try {
            await againStock({ id: id });
            loading.value = false
            showSuccessToast({ type: "success", message: "产品重新入库中" });
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('产品重新入库失败');
            }
            loading.value = false
        }
    } else if (title == '变价审核') {
        router.push({
            path: '/researchmechanismPriceChange',
            query: {
                id: id
            }
        });
    } else if (title == '组长审批') {
        loading.value = true
        try {
            await requestGroup({ id: id })
            loading.value = false
            showSuccessToast({ type: "success", message: "商品送审成功" });
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('商品送审失败');
            }
            loading.value = false
        }
    } else if (title == '总监审批') {
        loading.value = true
        try {
            await reAuditSecondInvent({ id: id })
            loading.value = false
            showSuccessToast({ type: "success", message: "商品送审成功" });
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('商品送审失败');
            }
            loading.value = false
        }
    } else if (title == '总监复核') {
        qualificationsFlag.value = true
        categoryColumns.value.forEach((item: any) => {
            if (item.value == detailInfo.value.productType) {
                categoryMessage.value = item.text
                categoryId.value = item.value
                selectedValues.value = [item.value]
                return;
            }
        });
    }
}
/** 退还供应商 */
const returnSubmit = async () => {
    loading.value = true
    try {
        await outSupplier({ ids: [detailInfo.value.id] })
        loading.value = false
        showSuccessToast({ type: "success", message: "商品退还成功" });
        dialogShow.value = false
        clearImgs();
        getDetail();
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('商品退还失败');
        }
        loading.value = false
    }
}
/** 补充合同日期 */
const onConfirm = (date) => {
    suppContractDate.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    showCalendar.value = false;
};
/** 无合同审批关闭 */
const close = () => {
    noContractApprovalFlag.value = false
}
/** 无合同审批提交 */
const noContractSubmit = async () => {
    if (!suppContractDate.value) {
        showFailToast({ message: "请选择补充合同日期", teleport: '.wrapper_div' });
    } else if (!message.value) {
        showFailToast({ message: "请输入审批附言", teleport: '.wrapper_div' });
    } else {
        // 无合同审批
        loading.value = true
        try {
            await noContractAdd({ productsId: detailInfo.value.id, supplementTime: suppContractDate.value, recruiterRemark: message.value, auditDeptId: '' })
            showSuccessToast({ type: 'success', message: '无合同审批提交成功', teleport: '.wrapper_div' });
            noContractApprovalFlag.value = false
            loading.value = false
            suppContractDate.value = ''
            message.value = ''
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('新增供应商失败');
            }
            loading.value = false
        }
    }
}

/** 清空所有图片 */
const clearImgs = () => {
    realSrcList.value = [];
    voucherImageList.value = [];
    customsDeclarationImageList.value = [];
    customsInformationImageList.value = [];
    customsInspectionImageList.value = [];
    customsTestReportImgaeList.value = [];
    otherImageList.value = [];
    noAbImageList.value = [];
};
/** 资质送审关闭 */
const qualificationsclose = () => {
    qualificationsFlag.value = false
}
const categoryMap = {
    '鞋帽部': '1',
    '酒茶部': '2',
    '箱包部': '3',
    '百货部': '4',
    '服装部': '5',
    '食品部': '6'
}
/** 可选品类column */
const getcategoryColumns = async () => {
    const res = await getSystemList({ parentId: '1796913597400784898' })
    if (res.data.length) {
        // 去掉惠麦优选部门
        const response = res.data.filter(item => item.deptName !== '惠麦优选')
        response.forEach(item => {
            item.text = item.deptName
            Object.keys(categoryMap).forEach(key => {
                if (item.deptName.includes(key)) {
                    item.value = categoryMap[key];
                    return;
                }
            });
        })
        categoryColumns.value = response
    }
}
getcategoryColumns()
/** 可选品类筛选 */
const onConfirmCategory = ({ selectedOptions }) => {
    categoryMessage.value = selectedOptions[0]?.text;
    categoryId.value = selectedOptions[0]?.value;
    categoryFlag.value = false
}
/** 可选品类取消 */
const qualificationsCancel = async () => {
    categoryMessage.value = ''
    qualificationsFlag.value = false
}
/** 可选品类提交 */
const qualificationsSubmit = async () => {
    if (!categoryMessage.value) {
        showFailToast({ message: "请选择可选品类", teleport: '.wrapper_div' });
    } else {

        try {
            if (detailInfo.value.auditStatus == 8 || detailInfo.value.auditStatus == 9 || detailInfo.value.auditStatus == 10) {
                // 核价重新发起初审
                await editSevens({ ids: [detailInfo.value.id], productType: categoryId.value })
            } else {
                // 研发总监复审
                await requestThirdInvent({ id: detailInfo.value.id, productType: categoryId.value })
            }
            loading.value = false
            showSuccessToast({ type: "success", message: "商品送审成功" });
            qualificationsFlag.value = false
            categoryMessage.value = ''
            selectedValues.value = []
            clearImgs();
            getDetail();
        } catch (error) {
            if (error == 'timeout') {
                showFailToast('商品送审失败');
            }
            loading.value = false
        }
    }
}

/** 更多点击事件 */
const moreClick = () => {
    rightPop.value = !rightPop.value
}
/** 编辑 */
const onClickRight = () => {
    router.push(`/researchEditProduct/${uniquekey.value}`);
};
/** 编辑只可编辑机制 规格/材质 卖点 商品图 */
const onClickMechanism = () => {
    router.push({
        path: `/researchEditProduct/${uniquekey.value}`,
        query: {
            mechanism: 'mechanism'
        }
    });
}
/** 编辑商品信息，除了机制*/
const onClickRights = () => {
    router.push({
        path: `/researchEditProduct/${uniquekey.value}`,
        query: {
            correctMechanism: 'correctMechanism'
        }
    });
}
/** 只可编辑规格/材质 卖点 商品图 */
const onClickRightFive = () => {
    router.push({
        path: `/researchEditProduct/${uniquekey.value}`,
        query: {
            fiveMechanism: 'fiveMechanism'
        }
    });
}
/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src: any, list: any) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            list.push(url);
        }
    }
};
/** 获取详情 */
const getDetail = async () => {
    // 用于修改状态后按钮隐藏 解决商品多次点击问题
    detailInfo.value.auditStatus = ''
    const res = await getInfoInvent({ id: uniquekey.value as any });

    // 根据供应商id获取供应商详情
    const response = await hmSupplierList({ id: res.data.supplierId });
    if (response.rows[0] && response.rows[0].businessImage) {
        res.data.businessImage = getEnvValue("VITE_APP_PIC_URL") + response.rows[0].businessImage;
    }

    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        fetchImagesSequentially(real_src, realSrcList.value);
        res.data.productImages = realSrcList.value
    }
    if (res.data.voucherImage) {
        const img1 = res.data.voucherImage.split(",");
        fetchImagesSequentially(img1, voucherImageList.value);
        res.data.voucherImages = voucherImageList.value
    }
    if (res.data.customsDeclarationImage) {
        const img2 = res.data.customsDeclarationImage.split(",");
        fetchImagesSequentially(img2, customsDeclarationImageList.value);
        res.data.customsDeclarationImages = customsDeclarationImageList.value
    }
    if (res.data.customsInformationImage) {
        const img3 = res.data.customsInformationImage.split(",");
        fetchImagesSequentially(img3, customsInformationImageList.value);
        res.data.customsInformationImages = customsInformationImageList.value
    }
    if (res.data.customsInspectionImage) {
        const img4 = res.data.customsInspectionImage.split(",");
        fetchImagesSequentially(img4, customsInspectionImageList.value);
        res.data.customsInspectionImages = customsInspectionImageList.value
    }
    if (res.data.customsTestReportImgae) {
        const img5 = res.data.customsTestReportImgae.split(",");
        fetchImagesSequentially(img5, customsTestReportImgaeList.value);
        res.data.customsTestReportImgaes = customsTestReportImgaeList.value
    }
    if (res.data.otherImage) {
        const img6 = res.data.otherImage.split(",");
        fetchImagesSequentially(img6, otherImageList.value);
        res.data.otherImages = otherImageList.value
    }
    if (res.data.noAbImage) {
        const img7 = res.data.noAbImage.split(",");
        fetchImagesSequentially(img7, noAbImageList.value);
        res.data.noAbImages = noAbImageList.value
    }
    if (res.data.bigVideo) {
        res.data.bigVideos = getEnvValue("VITE_APP_PIC_URL") + res.data.bigVideo
    }

    detailInfo.value = res.data;
    hmMechanismsList.value = res.data.hmMechanismsList[1]


    const data = await getInfo()
    deptName.value = data.data.user.dept.deptName
}
getDetail()

/** 补码跳转 */
const onClickComplement = () => {
    //  69码
    let styleCode = detailInfo.value.id;
    // 价格
    let price =
        detailInfo.value.hmMechanismsList[0].cooperationMode == "分佣"
            ? detailInfo.value.hmMechanismsList[0].price
            : detailInfo.value.hmMechanismsList[0].costPrice;
    // 佣金
    let commission =
        detailInfo.value.hmMechanismsList[0].cooperationMode == "分佣"
            ? detailInfo.value.hmMechanismsList[0].commission + "%"
            : "";
    // 机制
    let liveStreamingMechanism = detailInfo.value.hmMechanismsList[0].liveStreamingMechanism;
    // 商品名
    let styleName =
        detailInfo.value.styleName.length > 18
            ? detailInfo.value.styleName.substr(0, 18)
            : detailInfo.value.styleName;
    // 品牌名
    var brandName = detailInfo.value.brandName ? detailInfo.value.brandName : "";
    if (brandName.length > 18) {
        brandName = brandName.substr(0, 18);
    }
    // 上架时间
    let listingTime = detailInfo.value.shoppingTime ? "上架时间:" + detailInfo.value.shoppingTime : "上架时间:";
    // 规格/材质
    const gecs = detailInfo.value.specs ? detailInfo.value.specs : '';
    const specs = gecs.length > 190 ? gecs.substring(0, 190) : gecs
    let specsing =
        "规格/材质:" + specs;
    // 卖点
    let sellingPoint = "卖点:" + detailInfo.value.sellingPoints;
    //招商元姓名
    let recruiter = '招商:' + detailInfo.value.recruiter
    const arr: Array<string> = [];
    if (detailInfo.value.hmMechanismsList.length > 0) {
        detailInfo.value.hmMechanismsList.forEach((item, index) => {
            if (item.cooperationMode) {
                const obj = {
                    title: index == 0 ? '机制一:' : index == 1 ? '机制二:' : '机制三:',
                    number: item.cooperationMode == '分佣' ? `${item.price || 0.00}` : `${item.costPrice || 0.00}`,
                    commission: item.cooperationMode == '分佣' ? `${item.commission || 0.00}%` : '',
                    brokerage: item.cooperationMode == '分佣' ? `+${item.brokerage || 0.00}%` : '',
                    liveStreamingMechanism: index == 0 ? item.liveStreamingMechanism || '' : item.liveStreamingMechanism.substring(0, 8) || ''
                }
                arr.push(obj.title)
                arr.push(obj.number)
                arr.push(obj.commission)
                arr.push(obj.brokerage)
                arr.push(obj.liveStreamingMechanism)
            }
        })
    }

    (window as any).uni.navigateTo({
        url: `/pages/print/index?barCode=${encodeURIComponent(
            styleCode
        )}&num1=${encodeURIComponent(price)}&num2=${encodeURIComponent(
            commission
        )}&num3=${encodeURIComponent(
            liveStreamingMechanism
        )}&name=${encodeURIComponent(styleName)}&brand=${encodeURIComponent(
            brandName
        )}&listingTime=${encodeURIComponent(
            listingTime
        )}&recruiter=${encodeURIComponent(
            recruiter
        )}&specsing=${encodeURIComponent(
            specsing
        )}&mechanismList=${encodeURIComponent(
            arr.join(',')
        )}&sellingPoint=${encodeURIComponent(sellingPoint)}&page=1&from=merchants`,
    });
};

/** 返回区分不同地址 */
const handleLeft = () => {
    if (type.value == 'investmentSelection') {
        router.push({
            path: '/investmentSelection',
        })
    } else {
        router.back();
    }
};
/** 图片放大 */
const enlargeImage = (data: any, index: number) => {
    showImagePreview({
        images: data,
        startPosition: index,
    });
};
/** 复制 */
const copyClick = (title: string) => {
    copyTextToClipboard(title)
}
/**
* 弹窗
* @param index 
*  0: 基础信息
*  1: 直播补充信息
*  2: 商品资质
*  3: 品牌资质
*/
const popClick = async (index: number, item: any) => {
    if (index == 4) {
        const res = await listBrand({ supplierId: detailInfo.value.supplierId });
        if (res.rows.length > 0) {
            const brandLists = res.rows.filter(
                (item: any) => item.brandName == detailInfo.value.brandName
            );
            if (brandLists.length > 0) {
                const brandInfo = await getbrandId(brandLists[0].id);
                // 品牌商标注册证
                if (brandInfo.data.brandImage) {
                    brandInfo.data.brandImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.brandImage;
                }
                // 商标授权使用证明
                if (brandInfo.data.usageImage) {
                    brandInfo.data.usageImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.usageImage;
                }
                // 店铺销售授权
                if (brandInfo.data.sellImage) {
                    brandInfo.data.sellImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.sellImage;
                }
                // 其他补充资质
                if (brandInfo.data.otherImage) {
                    brandInfo.data.otherImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.otherImage;
                }
                // 联名款/其他授权
                if (brandInfo.data.jointlyImage) {
                    brandInfo.data.jointlyImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.jointlyImage;
                }
                popData.value = brandInfo.data;
                popData.value.brandName = detailInfo.value.brandName

            } else {
                popData.value = {};
                popData.value.brandName = detailInfo.value.brandName
            }
        } else {
            popData.value = {};
            popData.value.brandName = detailInfo.value.brandName
        }
    } else if (index == 2) {
        const response = await hmSupplierList({ id: detailInfo.value.supplierId });
        popData.value = response.rows[0]
    } else {
        popData.value = detailInfo.value
    }
    popShow.value = true
    popType.value = index
    popTitle.value = item.content
}
/** 
 * 是否核价初审样式
 */
const conputedQualityLog = (qualityLog: any) => {
    if (qualityLog) {
        if (!qualityLog.length) {
            return false
        } else if (qualityLog.length) {
            // 审核通过
            if (qualityLog[0].firstStatus == 11) {
                return true
            } else {
                return false
            }
        }
    } else {
        return false
    }
}
/** 
 * 是否核价复审样式
 */
// const conputedPricingLog = (pricingLog: any) => {
//     if (pricingLog) {
//         if (!pricingLog.length) {
//             return false
//         } else if (pricingLog.length) {
//             // 审核通过
//             if (pricingLog[0].auditStatus == 13) {
//                 return true
//             } else {
//                 return false
//             }
//         }
//     } else {
//         return false
//     }
// }
/** 主播返回 */
const goback = () => {
    isShowAnchor.value = false
    isChangeList.value = undefined
}
/** 选品主播提交 */
const anchorOnSubmit = async (coreId: string, coreName: string, sessionIndex: string, coreDeptId: string) => {
    loading.value = true
    try {
        await coreInvent({
            id: detailInfo.value.id,
            coreId,
            coreName,
            liveType: sessionIndex,
            coreDeptId
        });
        showSuccessToast({ type: "success", message: "主播选品成功" });
        loading.value = false
        isShowAnchor.value = false
        clearImgs();
        getDetail();
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('新增供应商失败');
        }
        loading.value = false
    }
}
/** 选品主播更改 */
const onChangeSubmit = async (liveType: string, coreDeptId: string) => {
    loading.value = true
    try {
        await changeCore({
            id: detailInfo.value.id,
            liveType,
            coreDeptId
        });
        showSuccessToast({ type: "success", message: "主播更改成功" });
        isShowAnchor.value = false
        loading.value = false
        isChangeList.value = undefined
        clearImgs();
        getDetail();
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('主播更改失败');
        }
        loading.value = false
    }
}
/** 更改主播 */
const anchorOnclick = () => {
    isChangeList.value = {
        coreName: detailInfo.value.coreName,
        coreId: detailInfo.value.coreDeptId,
        liveType: detailInfo.value.liveType
    }
    isShowAnchor.value = true
}
</script>
<script lang="ts">
export default { name: 'researchProductDetail' }
</script>
<style lang="less" scoped>
:deep(.van-cell) {
    padding: 0 !important;
}

:deep(.van-field__control) {
    background: #F6FAFF !important;
    border-radius: 5px;
}

:deep(.van-field__error-message) {
    position: absolute !important;
    bottom: 0px;
}

:deep(.van-field__word-limit) {
    font-weight: 400;
    font-size: 12px !important;
    color: #8492AD !important;
}

.researchProductDetail {
    width: 100%;
    height: 100vh;
    background: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        z-index: 6002;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .contents {
        width: 100%;
        height: calc(100% - 90px);
        overflow: auto;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: center;
        align-content: flex-start;
    }

    .pop_content {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 999;

        .launch_div {
            padding: 0px 10px 0 10px;
            box-sizing: border-box;
            padding-top: 90px;

            .buttons {
                font-size: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                width: 100%;
                margin-top: 10px;

                .cancel {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #1A1B1C;
                    background-color: #fff;
                    color: #000;
                    font-size: 14px;
                    color: #1A1B1C;
                    line-height: 44px;
                    text-align: center;
                }

                .save {
                    width: 162px;
                    height: 44px;
                    background: #0094FF;
                    border-radius: 23px;
                    color: #FFFFFF;
                    font-size: 14px;
                    line-height: 44px;
                    text-align: center;
                }
            }

            .launch_title {
                font-size: 14px;
                line-height: 40px;
                color: #1A1B1C;
            }

            .pop_div {
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;

                .pop_div_out {
                    width: 25%;
                    min-width: 78px;
                    display: flex;
                    justify-content: center;
                    height: 30px;
                    border-radius: 15px;
                    line-height: 30px;
                    font-size: 14px;
                    margin-bottom: 15px;
                }

                .pop_div_item {
                    width: 78px;
                    display: flex;
                    justify-content: center;
                    height: 30px;
                    border-radius: 15px;
                    line-height: 30px;
                    font-size: 12px;
                }
            }
        }
    }


    .product_detail_top {
        width: 98%;
        border-radius: 3px;
        height: 50%;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        height: auto;

        &_img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            img {
                width: 200px;
                height: 200px;
            }

            :deep(.van-swipe) {
                width: 200px;
                height: 200px;
            }

            :deep(.van-image) {
                width: 200px;
                height: 200px;
            }
        }

        .product_detail_top_img {
            width: 340px;
            height: 340px;
        }

        .van-swipe-item {
            width: 340px !important;
            height: 340px !important;

            .van-image {
                width: 340px;
                height: 340px;
            }
        }

        .van-swipe {
            width: 340px;
            height: 340px;
        }

    }

    .product_detail_top_details {
        width: 100%;
        box-sizing: border-box;
        padding: 0 15px;
        margin-bottom: 20px;

        .product_stylename {
            font-weight: 500;
            font-size: 18px;
            color: #1A1B1C;
            display: flex;
            align-items: flex-end;

            .styleName {
                max-width: calc(100% - 80px);
            }

            .product_mechanism {
                width: 56px;
                height: 22px;
                background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
                border-radius: 5px;
                text-align: center;
                line-height: 22px;
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF;
                margin-left: 20px;
            }
        }

        .product_id {
            width: 100%;
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
            display: flex;
            align-items: center;
            margin-top: 15px;
            justify-content: space-between;

            .produc_left {
                display: flex;
                align-items: center;
            }

            .van-image {
                width: 14px;
                height: 14px;
                margin-left: 10px;
            }

            .coreName {
                box-sizing: border-box;
                padding: 0 5px;
                height: 22px;
                background: #EBF4FF;
                border-radius: 2px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-weight: 500;
                font-size: 12px;
                color: #0094FF;

                .van-image {
                    width: 14px;
                    height: 14px;
                    margin-left: 0;
                    margin-right: 5px;
                }
            }

        }

        .product_user {
            width: 100%;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;

            .van-image {
                width: 14px;
                height: 14px;
                margin-left: 10px;
            }

            .display {
                display: flex;
                align-items: center;
            }

            .examine {
                div {
                    margin-right: 10px;
                }

                .examine_item {
                    width: 85px;
                    height: 22px;
                    background: #E7FDEE;
                    border-radius: 13px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 500;
                    font-size: 12px;
                    color: #19D11B;
                    line-height: 22px;

                    .van-image {
                        width: 14px;
                        height: 14px;
                        margin: 0 0 0 5px;
                    }
                }

                .examine_items {
                    width: 68px;
                    height: 22px;
                    background: #E3E5E8;
                    border-radius: 13px;
                    text-align: center;
                    line-height: 22px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #8492AD;
                }
            }

            .coreName {
                box-sizing: border-box;
                padding: 0 5px;
                height: 22px;
                background: #EBF4FF;
                border-radius: 2px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-weight: 500;
                font-size: 12px;
                color: #0094FF;

                .van-image {
                    width: 14px;
                    height: 14px;
                    margin-left: 0;
                    margin-right: 5px;
                }
            }
        }

        .product_users {
            width: 100%;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
        }

    }

    .info {
        margin-top: 20px;
        width: 345px;

        .info_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;

            .img {
                width: 16px;
                height: 16px;
            }

            .title {
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                width: calc(100% - 30px);
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .links {
                width: 7px;
                height: 12px;
            }
        }
    }

    .back {
        background: #F6FAFF;
        width: 100%;
        height: 10px;
    }

    .footer {
        width: 100%;
        height: 84px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        box-sizing: border-box;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;

        .more {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 14px;
            color: #1A1B1C;

            img {
                width: 10px;
                height: 6px;
                margin-right: 5px;
            }
        }


        .footer_left {
            width: 112px;
            height: 44px;
            border-radius: 23px;
            border: 1px solid #5FBBFF;
            text-align: center;
            line-height: 44px;
            font-weight: 400;
            font-size: 16px;
            color: #0094FF;
        }

        .footer_right {
            width: 140px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }

        .footer_lefts {
            width: 280px;
            height: 44px;
            border: 1px solid #5FBBFF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 500;
            font-size: 16px;
            color: #0094FF;
        }

        .footer_button {
            width: 280px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }

    .right_pop {
        position: fixed;
        bottom: 70px;
        width: 100px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        border-radius: 5px;
        left: 15px;
        font-weight: 400;
        font-size: 14px;
        color: #0094FF;
        box-sizing: border-box;
        padding: 20px 15px 0px;

        div {
            margin-bottom: 20px;
        }
    }

    .wrapper_qualifications {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .wrapper_div {
            width: 315px;
            height: 280px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;
            box-sizing: border-box;
            padding: 0 15px;

            .close {
                width: 10px;
                height: 10px;
                position: absolute;
                right: 18px;
                top: 18px;
            }

            .describe {
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                margin-bottom: 10px;
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                width: 100%;
                text-align: center;
                margin: 30px 0 20px 0;
            }

            .column {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;


                .lable {
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;

                }

                .value {
                    width: 214px;
                    height: 36px;
                    background: #F2F3F5;
                    border-radius: 18px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                    box-sizing: border-box;
                    padding: 0 15px;

                    .van-image {
                        width: 10px;
                        height: 6px;
                    }
                }
            }

            .buttons {
                width: 285px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: center;
                line-height: 44px;
                position: absolute;
                bottom: 10px;

                .cancel {
                    width: 135px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #0094FF;
                    font-weight: 400;
                    font-size: 16px;
                    color: #0094FF;
                }

                .save {
                    width: 135px;
                    height: 44px;
                    background: #0094FF;
                    border-radius: 23px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                }
            }

        }
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .wrapper_div {
            width: 315px;
            height: 415px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;

            :deep(.van-cell:after) {
                display: none;
            }

            :deep(.van-cell) {
                padding: 10px 16px !important;
            }

            .label {
                font-weight: 400;
                font-size: 14px;
                color: #000000;
                padding-left: 16px;
            }

            :deep(.van-field__control) {
                background: #F6FAFF !important;
                // height: 40px !important;

            }

            ::placeholder {
                font-size: 14px;
                color: #B8BECA;
            }

            .dates {
                :deep(.van-field__control) {
                    height: 40px !important;
                }
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                width: 100%;
                text-align: center;
                margin: 30px 0 20px 0;
            }

            .van-image {
                width: 10px;
                height: 10px;
                position: absolute;
                right: 18px;
                top: 18px;
            }

            :deep(.van-form) {
                min-height: 265px;
            }

            .buttons {
                color: #FFFFFF;
                font-size: 14px;
                width: 285px;
                height: 44px;
                background: #0094FF;
                border-radius: 23px;
                margin: auto;
                display: flex;
                justify-content: center;
                margin-top: 10px;
            }

        }
    }


    .wrappers {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .wrapper_div {
            width: 315px;
            height: 500px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;
            box-sizing: border-box;
            padding: 0 15px;

            .mechanism_conent {
                width: 285px;
                height: 280px;
                background: linear-gradient(#FBFCFE 0%, #EFF6FF 100%);
                border-radius: 10px;
                margin-top: 15px;
                box-sizing: border-box;
                padding: 20px 15px;

                :deep(.van-cell-group--inset) {
                    margin: 0 !important;
                    margin-bottom: 20px !important;
                    background: transparent !important;
                }

                :deep(.van-cell) {
                    padding: 0 !important;
                    background: none !important;
                    background: transparent !important;
                }

                :deep(.van-field__control) {
                    font-weight: 400 !important;
                    font-size: 14px !important;
                    color: #8492AD !important;

                }

                :deep(.van-field__button) {
                    padding-left: 0px !important;
                }

                :deep(.van-field__control) {
                    background: transparent !important;
                }

                .mechanism_conent_item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    margin-bottom: 20px;

                    .labels {
                        font-weight: 400;
                        font-size: 14px;
                        color: #1A1B1C;
                    }

                    .value {
                        font-weight: 400;
                        font-size: 14px;
                        color: #8492AD;
                    }
                }
            }

            .close {
                width: 10px;
                height: 10px;
                position: absolute;
                right: 18px;
                top: 18px;
            }

            .column {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;


                .lable {
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;

                }

                .value {
                    width: 214px;
                    height: 36px;
                    background: #F2F3F5;
                    border-radius: 18px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                    box-sizing: border-box;
                    padding: 0 15px;

                    .van-image {
                        width: 10px;
                        height: 6px;
                    }
                }
            }

            :deep(.van-cell:after) {
                display: none;
            }

            .label {
                font-weight: 400;
                font-size: 14px;
                color: #000000;
                padding-left: 16px;
            }

            :deep(.van-field__control) {
                background: #F6FAFF !important;
                // height: 40px !important;

            }

            ::placeholder {
                font-size: 14px;
                color: #B8BECA;
            }

            .dates {
                :deep(.van-field__control) {
                    height: 40px !important;
                }
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                width: 100%;
                text-align: center;
                margin: 30px 0 20px 0;
            }



            :deep(.van-form) {
                min-height: 265px;
            }

            .buttons {
                width: 285px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: center;
                line-height: 44px;
                position: absolute;
                bottom: 10px;

                .cancel {
                    width: 135px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #0094FF;
                    font-weight: 400;
                    font-size: 16px;
                    color: #0094FF;
                }

                .save {
                    width: 135px;
                    height: 44px;
                    background: #0094FF;
                    border-radius: 23px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                }
            }

            .describe {
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                margin-bottom: 10px;
            }



        }

    }

    .dialog_top {
        width: 100%;
        height: 185px;
        background: url('@/assets/operation/icon_erciquerenbeijing.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;

        .van-image {
            width: 70px;
            height: 70px;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-top: 20px;
        }

    }

    .postscript {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        margin-bottom: 20px;

        .buttons {
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;

            .cancel {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                border: 1px solid #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #0094FF;
            }

            .submit {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                background: #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
            }
        }
    }







    :deep(.van-nav-bar) {
        // background-color: #1466ff;
        height: 46px !important;
        width: 100%;
    }

    :deep(.van-nav-bar__title) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }

    :deep(.van-icon) {
        color: #000;
    }
}
</style>